import React from 'react';
import './progress.less';

let Progress = React.createClass({

    progressChange(e){

        let progressBar = this.refs.progressBar;
        let progress = (e.clientX - progressBar.getBoundingClientRect().left) / progressBar.clientWidth;
        this.props.onProgressChange && this.props.onProgressChange(progress);


    },

    render() {
        return (
            <div className='component-progress row' ref='progressBar' onClick={this.progressChange}>
                <div className='progress'
                     style={{maxWidth: `${this.props.progress}%`, background : `${this.props.barColor}`}}></div>
            </div>
        );
    }
});

export default Progress;